<script setup>
import { ref } from 'vue'
import html2canvas from 'html2canvas'

import posterBgPath from '@/assets/poster-bg.jpg'
import poseterIcon from '@/assets/icon.png'
const isModalVisible = ref(false)
const posterBg = ref(posterBgPath) // 海报背景图
const posterIcon = ref(poseterIcon) // 海报二维码图标

const isPosterReady = ref(false)

const loadPoster = () => {
  const img = new Image()
  img.src = posterBg.value
  img.onload = () => {
    isPosterReady.value = true
  }
}

const showModal = () => {
  loadPoster() // 确保图片加载完成
  isModalVisible.value = true
  console.log('posterId', props.posterId)
  console.log('posterTitle', props.posterTitle)
}
defineExpose({ showModal })

const downloadPoster = async () => {
  const posterElement = document.getElementById('poster-content')

  try {
    // 使用 html2canvas 渲染 DOM
    const canvas = await html2canvas(posterElement, {
      useCORS: true,
      allowTaint: true
    })

    const imgData = canvas.toDataURL('image/png')

    // 创建下载链接
    const link = document.createElement('a')
    link.href = imgData
    link.download = '活动海报.png'
    link.click()
  } catch (error) {
    console.error('生成海报失败：', error)
  }
}
const props = defineProps({
  posterId: {
    type: Number
  },
  posterTitle: {
    type: String
  }
})
const qrCode = ref(
  `https://shengdongkepuxing.top/pages/volunteerDetail/volunteerDetail?records=${props.posterId}`
) // 二维码图片路径
</script>

<template>
  <div>
    <!-- 活动海报按钮 -->

    <!-- 模态框 -->
    <a-modal
      v-model:open="isModalVisible"
      title="活动海报"
      :width="400"
      :footer="null"
      :bodyStyle="{ padding: 0, overflow: 'hidden' }"
    >
      <div
        id="poster-content"
        :style="{
          backgroundImage: `url(${posterBg})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          height: '622px',
          width: '350px',
          position: 'relative'
        }"
      >
        <!-- 标题 -->
        <div
          style="
            position: absolute;
            top: 56%;
            width: 100%;
            text-align: center;
            color: #e0073f;
            font-size: 22px;
            font-weight: bold;
            font-family: 'QiushuiShotai Bright';
          "
        >
          {{ posterTitle }}志愿活动
        </div>

        <!-- 二维码 -->
        <div
          style="
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
          "
        >
          <a-qrcode
            error-level="H"
            :value="qrCode"
            :icon="posterIcon"
            bg-color="#fff"
          />
          <div style="color: black; margin-top: 8px">扫码查看活动详情</div>
        </div>
      </div>
      <!-- 下载按钮和二维码 -->
      <div style="width: 100%; text-align: center; padding: 16px">
        <a-button type="primary" @click="downloadPoster">下载海报</a-button>
      </div>
    </a-modal>
  </div>
</template>
<style lang="scss" scoped>
@import url('https://static.zeoseven.com/zsft/245/main/result.css');
</style>
